<template>
  <div class="layout">
    <div class="pre">
      <div class="pre_title">
        <el-radio-group v-model="currentIndex">
          <el-radio-button :label="1">未跟进客户数</el-radio-button>
          <el-radio-button :label="2">跟进客户数</el-radio-button>
          <el-radio-button :label="3">跟进次数</el-radio-button>
        </el-radio-group>
        <div class="btn_left">
          <el-form ref="formRef" :model="formData" label-width="96px" class="searchForm" :inline="true" v-if="currentIndex == 1">
            <el-form-item label="">
              <el-select style="width: 290px" v-model="formData.stage_id" placeholder="全部" @change="changestage($event)">
                <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">
                  {{ item.name }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select style="width: 290px" v-model="formData.time_type" placeholder="全部" @change="changetime($event)">
                <el-option label="全部" :value="-1"></el-option>
                <el-option label="超过1天未跟进" :value="1"></el-option>
                <el-option label="超过2天未跟进" :value="2"></el-option>
                <el-option label="超过3天未跟进" :value="3"></el-option>
                <el-option label="超过4天未跟进" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <!-- <span class="export" @click="exportCus()">导出</span> -->
        </div>
      </div>
      <div class="min" v-show="!isNoMessage1" ref="myRef_one" id="echarts"></div>
      <div class="no_data" v-show="isNoMessage1">
        <img class="no_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">暂无数据</div>
      </div>
    </div>
    <div class="pre">
      <div class="pre_title">
        <span class="title-text">详细数据</span>
        <el-button @click="exportCus()">导出</el-button>
      </div>
      <div class="table-list">
        <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%" class="tableData" :header-cell-style="{ background: '#F9F9F9', color: '#33302D' }">
          <el-table-column property="top" label="排行" />
          <el-table-column property="name" label="员工名称" />
          <el-table-column property="stage" label="跟进阶段" />
          <el-table-column v-if="currentIndex==1" property="no_follow" label="未跟进客户数" />
          <el-table-column v-if="currentIndex==2" property="num" label="跟进客户数" />
          <el-table-column v-if="currentIndex==3" property="no_follow" label="跟进次数" />
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, inject, watch, nextTick } from 'vue'
import { getBoardtopexport, getBoardstagelist } from '@/api/customerbulletin/bulleinManage'
import { getDay } from '@/utils/timeCycle'
let echarts = inject('ec')
const currentIndex = ref(1)
const myRef_one = ref(null)
const isNoMessage1 = ref(false)
const isNoMessage2 = ref(false)
const props = defineProps(['completionDatatwo', 'deliveryDatatwo', 'paramstwo','timedata'])
const emit = defineEmits(['eventData'])
const tableData = ref(null)
// 创建人options
const creators = ref([])
const params = reactive({
  screen_time: [],
  employee_ids: [],
  departments: [],
  type: currentIndex.value,
  stage_id: -1,
  time_type: -1
})
const timedatalist=ref()
const xData = ref([])
const yData = ref([])
const formData = reactive({
  stage_id: -1,
  time_type: -1
})
const stageAll = () => {
  getBoardstagelist({}).then((data: any) => {
    console.log(data)
    creators.value = data
  })
}
const getChart = (data: any) => {
  console.log(data)
  xData.value = []
  yData.value = []
  data.map((item: any) => {
    xData.value.push(item.name)
    yData.value.push(item.value)
  })
  if (data.length == 0) {
    isNoMessage1.value = true
    return
  } else {
    isNoMessage1.value = false
  }
  console.log( xData.value, yData.value,'========')

  let myCharts=document.getElementById('echarts')  // 增加这一行
  myCharts.style.width=window.innerWidth+ 'px'  // 再增加这一行
  console.log(myCharts.style.width)
  let myChart_one = echarts.init(myRef_one.value)
  myChart_one.setOption({
    xAxis: {
      type: 'category',
      data: xData.value
    },
    yAxis: {
      type: 'value',
      name: currentIndex.value == '3'?'次数/次':'人数/人',
      position: 'left',
      alignTicks: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          title: "下载图片",
          name: '员工TOP10' + ['未跟进客户数', '跟进客户数', '跟进次数'][currentIndex.value - 1] + timedatalist.value,
        }
      }
    },
    series: [
      {
        data: yData.value,
        type: 'bar',
        showBackground: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#FFC210' },
            { offset: 0.5, color: '#FFC230' },
            { offset: 1, color: '#FFC290' }
          ])
        }
      }
    ]
  },true)
  nextTick(() => {
     myChart_one.resize()
  })
  window.onresize = function () {
    myChart_one.resize()
  }
}
const datatable = (data: any) => {
  tableData.value = data
}
const changestage = (event: any) => {
  params.stage_id = event
  emit('eventData', params)
}
const changetime = (event: any) => {
  params.time_type = event
  emit('eventData', params)
}

// 导出客户
const exportCus = () => {
  params.screen_time = props.paramstwo.screen_time
  params.departments = props.paramstwo.departments
  params.employee_ids = props.paramstwo.employee_ids
  getBoardtopexport(params).then((res: any) => {
    window.location = res.url
  })
}
onMounted(() => {
  stageAll()
})
watch(
  () => props.completionDatatwo,
  (val) => {
    getChart(val)
  },
  { deep: true, immediate: true }
)
watch(
  () => props.deliveryDatatwo,
  (val) => {
    datatable(val)
  }
)
watch(
  () => props.timedata,
  (val) => {
    timedatalist.value=val.end_time
  }
)
watch(currentIndex, (val) => {
  currentIndex.value = val
  params.type = val
  formData.time_type = params.time_type = -1
  formData.stage_id = params.stage_id = -1
  emit('eventData', params)
})
// defineExpose({ change }) //像父组件抛出方法
</script>
<style lang="scss" scoped>
.layout {
  width: 100%;
  .pre {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;

    &:nth-of-type(2) {
      border-top: 16px solid #fbfbfb;
    }

    .pre_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #EAEAEA;
      padding: 16px 20px;
      
      .btn_left {
        display: flex;
        align-items: center;

        .btn_item {
          padding: 10px 18px;
          background: #ffffff;
          font-size: 16px;
          line-height: 16px;
          font-weight: 500;
          color: #ff6b00;
          border: 1px solid #ff6b00;
          cursor: pointer;
          flex-shrink: 0;
        }
        .active {
          background: #ff6b00;
          color: #ffffff;
        }
      }
    }
    .table-list {
      padding: 20px;
    }
    &_title {
      padding: 20px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .export {
        display: inline-block;
        width: 64px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #eaeaea;
        cursor: pointer;
      }
    }
    .title-text {
      line-height: 38px;
    }
    .min {
      height: 600px;
      width: 100%;
      background: #ffffff;
    }
  }
  .no_data {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .no_img {
      margin-left: 35px;
    }
    .emty_title{
      margin-top:0px;
    }
  }
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
